<template>
  <div class="rankList-chat-container" v-if="rankType == 1 || rankType == 2">
    <div v-for="(item, index) in dataList" :key="index" class="rankList-item">
      <span
        class="serialNo"
        :style="{
          backgroundImage:
            index + 1 <= excellent
              ? `url(${frontImage})`
              : `url(${otherImage})`,
        }"
        >{{ index + 1 }}</span
      >
      <span class="title">{{ item[titleKey] }}</span>
      <div class="progress">
        <div class="progress-bg">
          <div
            class="percent"
            :style="{ width: (item[tailKey] / maxVal) * 100 + '%' }"
          ></div>
        </div>
      </div>
      <span class="count">{{ ("" + item[tailKey]) | division }}</span>
    </div>
  </div>
  <div v-else class="rankList-chat-container">
    <RankType3 v-if='rankType == 3' :propObj="childProp" />
    <RankType4 v-if='rankType == 4' :propObj="childProp" />
  </div>
</template>
<script>
const imageObj = {
  1: "/type1.png",
  2: "/type2.png",
};
import RankType3 from "./component/rankType3";
import RankType4 from "./component/rankType4";
import { division } from "./util";
export default {
  name: "data-v-rankList",
  components: {
    RankType3,
    RankType4
  },
  props: {
    rankType: {
      type: Number,
      default: 1,
    },
    list: {
      type: Array,
      default: () => [],
      required: true,
    },
    titleKey: {
      type: String,
      default: "",
      required: true,
    },
    tailKey: {
      type: String,
      default: "count",
    },
    maxVal: {
      type: Number,
      default: 0,
      required: true,
    },
    excellent: {
      type: Number,
      default: 1,
    },
    image: {
      type: String,
      default: "",
    },
    excellentImage: {
      type: String,
      default: "",
    },
  },
  watch: {},
  filters: {
    division,
  },
  computed: {
    frontImage() {
      const { image, excellentImage } = this;
      if (image && excellentImage) {
        return excellentImage;
      }

      return require("./img" + imageObj[this.rankType]);
    },
    otherImage() {
      const { image, excellentImage } = this;
      if (image && excellentImage) {
        return image;
      }
      const imageArr = imageObj[this.rankType].split(".");
      return require("./img" + imageArr[0] + "-default.png");
    },
    childProp() {
      const { maxVal, dataList, titleKey, tailKey } = this;
      return {
        maxVal,
        dataList,
        titleKey,
        tailKey,
      };
    },
  },
  data() {
    const tailKey = this.tailKey;
    const dataList = this.list.sort((a, b) => b[tailKey] - a[tailKey]);
    return {
      dataList,
    };
  },
  mounted() {},
};
</script>
<style src='./index.css' scoped></style>